<template>
  <div>
    <el-card class="box-card">
      <div class="news_header">
        <div class="main_ti box">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="box">
            <!-- <el-tab-pane label="全部" name="-1"></el-tab-pane> -->
            <el-tab-pane name="0">
              <div slot="label">
                <span>软件销售账单</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="硬件账单" name="1"></el-tab-pane>
            <el-tab-pane label="供应链账单" name="2"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="mainor_form">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="70px"
          >
            <el-form-item label="单号">
              <el-input
                v-model="form.name"
                clearable
                placeholder="原始单号/账单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="账单日期">
              <el-date-picker
                v-model="form.sendTime"
                type="daterange"
                class="time220"
                :editable="false"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              />
            </el-form-item>
            <el-form-item label="用户">
              <el-input
                v-model="form.domain_name"
                clearable
                placeholder="用户名称"
              ></el-input>
            </el-form-item>

            <div class="more el-form-item" @click="more">
              <span>更多</span>
              <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
            </div>
            <div class="clearfix"></div>
            <el-collapse-transition>
              <div v-if="moredata" style="width: 100%">
                <!-- <el-form-item label="订单号" prop="order_no">
                </el-form-item> -->
                <el-form-item label="单据类型">
                  <el-input
                    v-model="form.region"
                    clearable
                    placeholder="单据类型"
                  ></el-input>
                </el-form-item>
                <el-form-item label="结算状态">
                  <el-select v-model="value" placeholder="结算状态">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-collapse-transition>
            <el-form-item>
              <el-button
                class="reset marginLeft10"
                type="primary"
                @click="reset"
                >重置</el-button
              >
              <el-button
                type="primary"
                @click="getArticleList"
                :loading="listLoading"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="main_table" style="min-height: 600px">
          <el-table
            ref="multipleTable"
            :data="nicknameData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <!-- <el-table-column label="新闻日期" width="250">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column> -->
            <el-table-column
              prop="title"
              label="单据类型"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="author"
              label="原始单号"
              width="200"
              align="center"
            >
            </el-table-column>

            <el-table-column prop="intro" label="用户名称" align="center">
            </el-table-column>
            <el-table-column label="下单原价" prop="xiad" align="center">
              <!-- <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                :active-value="1"
                :inactive-value="2"
                @change="changeSwitch($event, scope.row)"
              >
              </el-switch>
            </template> -->
            </el-table-column>
            <el-table-column prop="jine" label="配送金额" align="center" />
            <el-table-column prop="zhangdh" label="账单号" align="center" />
            <el-table-column prop="zhangd" label="账单金额" align="center" />
            <el-table-column prop="jies" label="结算状态" align="center" />
            <el-table-column
              label="管理操作"
              width="300"
              align="center"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: #e4aa39"
                  size="mini"
                  @click="editNews(scope.row)"
                  title="修改"
                  >修改</el-button
                >
                <el-popconfirm
                  confirm-button-text="是的"
                  cancel-button-text="不用了"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除勾选的数据吗？"
                  @onConfirm="deleteNews(scope.row)"
                >
                  <el-button
                    type="text"
                    style="color: #67c23a"
                    size="mini"
                    title="删除"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
                <!-- <el-button
                type="primary"
                icon="el-icon-search"
                @click="viewNews(scope.row)"
                size="mini"
                title="查看"
              ></el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="footer_pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="page_sizes"
          layout=" ->,total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "orderfinance",
  data() {
    return {
      // 页面
      currentPage4: 1, //第几页
      page_sizes: 10, //每页条数
      total: 1, //总页数
      activeName: 0,
      form: {
        name: "",
        domain_name: "",
        region: "",
        sendTime: "",
      },
      nicknameData: [
        {
          title: "",
          author: "",
          intro: "",
          xiad: "",
          jine: "",
          zhangdh: "",
          zhangd: "",
          jies: "",
        },
      ],
      moredata: false,
      options: [
        {
          value: "选项1",
          label: "所有",
        },
        {
          value: "选项2",
          label: "已结算",
        },
        {
          value: "选项3",
          label: "未结算",
        },
      ],
      value: "",
      // 勾选的数据
      multipleSelection: [],
      // 新闻日期
      pickerOptions: [],
      listLoading: false,
    };
  },
  methods: {
    handleClick() {},

    reset() {}, //重置
    getArticleList() {}, //搜索
    editNews(row) {},
    deleteNews(row) {},
    more() {
      this.moredata = !this.moredata;
    },
    // 勾选的数据
    handleSelectionChange(val) {
      console.log("val", val);
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page_sizes = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 100%;
  margin: 0.875rem;
  .delectright {
    position: relative;
    left: 95%;
  }
}
</style>